* {
    margin: 0;
    padding: 0;
}
img {
   vertical-align: center;
}
@keyframes colorRotate {
   0% {
       filter: hue-rotate(0deg);
   }
   100% {
       filter: hue-rotate(360deg);
   }
}
@keyframes fadeIn {
   0% {
      opacity: 0;
   }
   100% {
      opacity: 1;
   }
}
.game-root {
   position: fixed;
   width: 100%;
   height: 100%;
}
.cover,
.over{
   position: absolute;
   z-index: 999;
   width: 100vw;
   height: 100vh;
   background-color: rgba(129, 155, 173, 0.8);
   text-align: center;
   transition: all .5s;
}
// .cover {
   
// }
.over {
   position: fixed;
   top: 0;
   left: 0;
}
.title {
   display: block;
   margin: 50px auto;
}
.rule {
   font-size: 28px;
   color: brown;
   text-align: center;
   text-shadow: -2px -2px 6px brown;
}
.cover button {
   padding: 20px;
   margin: 30px;
   color: rgb(11, 79, 156);
   background-image: linear-gradient(to right bottom, rgb(197, 218, 108),#cf6a6a);
   border: none;
   cursor: pointer;
}
.over {
display: none;
}
.hide {
   display: none;
}
.show {
   display: block;
   animation: fadeIn .5s;
}